<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESModule</title>
  <!-- 
  `import.meta`  是 ES6 模块的一部分，提供了一个与模块相关的元信息对象。它在模块上下文中可用，允许开发者访问一些关于当前模块的信息。以下是对  `import.meta`  的详细总结说明。

  一、定义
  `import.meta`  是一个对象，包含与当前模块相关的元信息。这个对象的内容可能会因环境而异，但最常用的属性是  `import.meta.url` 。

  二、主要属性
   1.  `import.meta.url` 
  - 定义： `import.meta.url`  返回当前模块的 URL。这对于在模块中动态加载其他资源、获取模块位置等非常有用。
   2. 示例
  // module.js
  console.log(import.meta.url); // 输出: 当前模块的 URL，例如 "file:///path/to/module.js"
  三、使用场景
  1. 动态加载资源：可以使用  `import.meta.url`  结合动态导入（ `import()` ）来加载与当前模块相关的资源。
  const moduleUrl = import.meta.url;
    import(moduleUrl + '/anotherModule.js')
        .then(module => {
            // 使用加载的模块
        });
  2. 构建工具：在构建工具或打包工具中， `import.meta`  可以用来获取模块的路径，以便进行相应的处理。

  3. 调试和日志：可以在调试时打印当前模块的 URL，帮助开发者了解模块的加载情况。

  四、注意事项
  1. 仅在模块中可用： `import.meta`  只能在 ES6 模块中使用，不能在普通的脚本中使用。
  2. 环境依赖： `import.meta`  的具体实现和可用性可能会依赖于执行环境（如浏览器、Node.js 等）。

  五、总结
  -  `import.meta`  是一个用于访问当前模块元信息的对象，最常用的属性是  `import.meta.url` ，它返回当前模块的 URL。
  - 这个特性在动态加载资源、构建工具和调试中非常有用。
  -  `import.meta`  只能在 ES6 模块中使用，具体行为可能因环境而异。
  -->
</head>
<body>
  
  <!-- 注意事项二: 在我们打开对应的html时, 如果html中有使用模块化的代码, 那么必须开启一个服务来打开 type="module" -->
  <script src="./main.js" type="module"></script>

</body>
</html>